<template>
  <div class="use-template-refs-list">
    <h3></h3>
    <span v-for="i of count" :key="i" :ref="refsList.set">{{ i }}</span>
    <hr>
    <a class="count" href="javascript:;" @click="toggle(-1)">-1</a>
    <a class="count" href="javascript:;" @click="toggle(1)">+1</a>
  </div>
</template>

<script>
import {useTemplateRefsList} from "@vueuse/core";
import {onMounted, ref} from "vue";

export default {
  name: "useTemplateRefsList",
  setup() {
    const count = ref(10)
    // 这个 useTemplateRefsList 用来应对vue3.0 v-for 中的 ref 不再注册 ref 数组 的非兼容性改变
    const refsList = useTemplateRefsList();

    onMounted(() => {
      console.log(refsList.value)
    })

    const toggle = (temp) => {
      count.value += temp
      // Proxy {0: span, 1: span, 2: span, 3: span, 4: span, 5: span, 6: span, 7: span, 8: span, 9: span, set: ƒ}
      console.log(refsList.value)
    }

    return {
      count,
      refsList,
      toggle
    }
  }
}
</script>

<style lang="less" scoped>
.use-template-refs-list {
  span {
    margin-right: 10px;
    color: #2c3e50;;
  }

  .count {
    display: inline-block;
    margin: 0 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;

    background-color: #e4e4e4;
    border-radius: 50%;
  }
}
</style>
